<!--
 * @Description: 新增上网权限
 * @Author: 0001101008/HuYuxi
 * @Date: 2021-10-16 16:20:50
 * @LastEditTime: 2021-11-05 15:28:34
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <el-dialog
    :title="dialogTitle"
    :close-on-click-modal="false"
    width="500px"
    :visible.sync="dialogStatus"
    @close="cancel"
  >
    <el-form ref="etherForm" :model="form" :rules="rules" label-width="80px" label-position="right">
      <!-- 策略名称 -->
      <el-form-item label="策略名称" prop="displayName">
        <el-input v-model="form.displayName" placeholder style="width:100%;"></el-input>
      </el-form-item>
      <!-- 应用 -->
      <el-form-item label="应用" prop="aclName">
        <el-select
          v-model="form.aclName"
          clearable
          @clear="filterVmModel"
          placeholder="请选择应用"
          filterable
          v-el-select-loadmore="loadmore"
          :filter-method="filterVmModel"
          style="width: 100%;"
        >
          <el-option
            v-for="(item, index) in appList"
            :key="index"
            :value="item.applicationType === 'Acl' ? item.aclName :item.displayName"
            :label="item.displayName"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="onSubmit">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ['ne', 'type', 'dialogStatus'],
  directives: {
    // 计算是否滚动到最下面
    'el-select-loadmore': {
      bind (el, binding) {
        // 获取element-ui定义好的scroll盒子
        const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
        SELECTWRAP_DOM.addEventListener('scroll', function() {
          // scrollHeight 获取元素内容高度(只读)
          // scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
          // clientHeight 读取元素的可见高度(只读)
          // 如果元素滚动到底, 下面等式返回true, 没有则返回false:
          const condition = Math.round(this.scrollHeight - this.scrollTop) <= this.clientHeight;
          if (condition) {
            binding.value();
          }
        });
      }
    }
  },
  data () {
    return {
      dialogTitle: '新建上网权限配置',
      form: {
        id: null,
        displayName: null,
        aclName: null,
      },
      // 筛选文本
      filterText: '',
      appList: [],
      page: {
        page: 1,
        pageSize: 15,
        total: 0
      },
      rules: {
        displayName: [{
          required: true,
          message: '请填写策略名称',
          trigger: 'blur'
        }],
        aclName: [{
          required: true,
          message: '请选择应用',
          trigger: 'change'
        }]
      }
    };
  },
  watch: {
    type: {
      immediate: true,
      handler (val) {
        let _this = this;
        if (val === 'create') {
          _this.dialogTitle = '新建上网权限配置';
          _this.form = {
            id: null,
            displayName: null,
            aclName: null,
          };
        }
      }
    }
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      let params = {
        keyword: "APP",
        neId: _this.ne.id,
        limit: _this.page.pageSize,
        offset: (_this.page.page - 1) * _this.page.pageSize
      };
      _this.getAclList(params);
    });
  },
  methods: {
    // 取消
    cancel () {
      let _this = this;
      _this.$emit('handleDialog', false);
      _this.$refs['etherForm'].resetFields();
    },
    // 分页方法 详见 directives
    loadmore (firstTag) {
      let _this = this;
      // 筛选时下拉不触发分页
      if (!_this.filterText) {
        if (!firstTag) {
          _this.page.page++;
        }
        let params = {
          keyword: "APP",
          neId: _this.ne.id,
          limit: _this.page.pageSize,
          offset: (_this.page.page - 1) * _this.page.pageSize
        };
        _this.getAclList(params);
      }
    },
    // 筛选方法
    filterVmModel (value) {
      let _this = this;
      _this.filterText = value;
      // 筛选数据，有值时清空选项并按照关键字搜索对应结果集合
      if (value) {
        _this.appList = [];
        _this.$nextTick(() => {
          _this.page = {
            page: 1,
            pageSize: 15,
            total: 0
          };
          let params = {
            keyword: "APP",
            neId: _this.ne.id,
            limit: _this.page.pageSize,
            offset: (_this.page.page - 1) * _this.page.pageSize
          };
          _this.getAclList(params);
        });
      } else {
        // 空值时，触发重置
        this.appList = [];
        this.$nextTick(() => {
          _this.page = {
            page: 1,
            pageSize: 15,
            total: 0
          };
          let params = {
            keyword: "APP",
            neId: _this.ne.id,
            limit: _this.page.pageSize,
            offset: (_this.page.page - 1) * _this.page.pageSize
          };
          _this.getAclList(params);
        });
      }
    },
    //  获取应用
    getAclList (params) {
      let _this = this;
      _this.$http.post({
        url: '/api/sdwan/application/aclrule/query',
        data: params
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          _this.appList = resultBody.objects;
        }
      });
    },
    // 确认
    onSubmit () {
      let _this = this;
      _this.$refs['etherForm'].validate((valid) => {
        if (valid) {
          let params = {
            neId: _this.ne.id,
            siteId: _this.ne.extAttrs.siteId,
            displayName: _this.form.displayName,
            aclName: _this.form.aclName,
            type: 'AC'
          };
          _this.$http.post({
            url: '/api/sdwan/applicationroute/create',
            data: params
          }).then(res => {
            let { status } = res;
            if (status === '0') {
              _this.$message.success('创建成功！');
              _this.$emit('handleDialog', false);
              _this.$parent.refresh();
            }
          });
        } else {
          _this.$message.error('请检查必填项！');
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.ip-mask {
  width: 100%;
  ::v-deep .el-input {
    float: left;
  }
  ::v-deep .el-input:first-child {
    width: 75%;
  }
  label {
    display: block;
    width: 5%;
    float: left;
    text-align: center;
  }
  ::v-deep .el-input:last-child {
    width: 20%;
    &::after {
      content: "";
      overflow: hidden;
      clear: both;
    }
  }
}
</style>